<template>
  <div class="hello">
    <div class="manage_tip">
      <span class="title">{{$t('message.login')}}</span>
      <el-form>
        <el-form-item :label="$t('message.uname')" prop="phone">
          <el-input v-model="loginUser.phone" placeholder="请输入手机活邮箱"></el-input>
        </el-form-item>
      </el-form>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          中英文切换
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cn">中文</el-dropdown-item>
          <el-dropdown-item command="en">英文</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      lang: "",
      loginUser: {
        phone: "",
      },
    };
  },
  computed: {
    rules() {
      return {
        password: [
          {
            required: true,
            message: this.$t("message.password"),
            trigger: "blur",
          },
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,16}$/,
            message: "输入6-16位包含数字、字母、特殊字符的密码",
            trigger: "blur",
          },
        ],
      };
    },
  },

  methods: {
    // 根据下拉框的中被选中的值切换语言
    handleCommand(command) {
      // this.$message("click on item " + command);
      switch (command) {
        case "cn": {
          this.lang = "cn";
          this.$i18n.locale = this.lang;
          break;
        }
        case "en": {
          this.lang = "en";
          this.$i18n.locale = this.lang;
          break;
        }

        default:
          break;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
